//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(200, 100);
ctx.lineTo(300, 50);
ctx.lineWidth = 15; //设置线宽
/* 
  butt:直角,默认,线条在终点处直接结束,不会增加任何额外的长度到线条上,看起来就像是被“截断”了一样。
  round:圆角,线条的末端被圆形封口，即在线条的末端添加一个半径等于线宽一半的圆弧。
  square:方角,线条的末端被正方形封口，即在线条的末端添加一个宽度和高度都等于线宽的正方形,会在线条的末端增加半个线宽的长度,
  半个线宽即这个正方形的一半会覆盖在线条上，另一半则会延伸出线条之外。
  //lineCap	线帽(顾名思义就是线段两端的样式)
*/
ctx.lineCap = 'square'; //设置线段端点形状,取值有butt(直角,默认),round(圆角),square(方角)
//lineJoin 顾名思义就是两条线段在连接处的样式
ctx.lineJoin = 'miter'; //设置拐角形状,取值有miter(尖角,默认),round(圆角),bevel(平角)
ctx.stroke();
